<template>
  <div>
    <!--面包屑-->
    <el-breadcrumb separator="/" style="padding-left: 10px;padding-bottom: 10px;font-size: 12px">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>业务管理</el-breadcrumb-item>
      <el-breadcrumb-item>物资资料</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-alert
          title="友情提示: 商品的分类只支持三级分类"
          type="warning">
      </el-alert>
      <!--条件搜索-->
      <el-row style="margin-top: 10px">
        <el-col :span="8">
          <el-cascader
              v-model="categorys"
              placeholder="请选择分类查询"
              size="small"
              :options="options"
              :props="pidProps"
              style="width: 80%"
              clearable></el-cascader>
        </el-col>
        <el-col :span="8">
          <el-row type="flex">
            <el-input size="small" v-model="productVO.name" placeholder="请输入内容"></el-input>
            <el-select :clearable="true" size="small" v-model="productVO.status" placeholder="请选择">
              <el-option label="正常" :value="0"></el-option>
              <el-option label="回收站" :value="1"></el-option>
              <el-option label="待审核" :value="2"></el-option>
            </el-select>
          </el-row>
        </el-col>

        <el-col :span="8">
          <el-row type="flex" justify="center">
            <el-button size="mini" class="el-icon-search" type="primary" @click="getList">搜索</el-button>
            <el-button size="mini" class="el-icon-refresh-right" type="warning" @click="reset">重置</el-button>
            <el-button size="mini" class="el-icon-plus" type="success" @click="add">添加</el-button>
            <el-button size="mini" type="info" @click="refresh">刷新</el-button>
          </el-row>
        </el-col>

      </el-row>
      <!--表格-->
      <el-table
          :data="tableData"
          border
          style="width: 100%"
          max-height="650px"
      >

        <el-table-column
            prop="id"
            label="ID"
            width="100">
        </el-table-column>
        <el-table-column
            prop="imageUrl"
            label="图片"
            width="60">
          <template slot-scope="scope">
            <el-popover placement="right" trigger="hover">
              <el-image
                  slot="reference"
                  style="width: 38px; height: 38px"
                  :src="scope.row.imageUrl"
                  fit="fit"></el-image>
              <el-image
                  style="width: 200px; height: 200px"
                  :src="scope.row.imageUrl"
                  fit="fit"></el-image>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
            prop="name"
            label="物资名称"
            width="220">
        </el-table-column>
        <el-table-column
            prop="pnum"
            label="物资编号"
            width="300">
        </el-table-column>
        <el-table-column
            prop="model"
            label="物资规格"
            width="100"
            align="center"
        >
          <template slot-scope="scope">
            <el-tag type="success">{{ scope.row.model }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="unit"
            label="单位"
            align="center"
            width="50">
        </el-table-column>
        <el-table-column
            prop="remark"
            label="备注"
        >
        </el-table-column>
        <el-table-column
            prop="status"
            label="状态"
            width="80"
            align="center"
        >
          <template slot-scope="scope">
            <el-tag size="mini" type="danger" effect="plain" v-if="scope.row.status==2">回收</el-tag>
            <el-tag size="mini" effect="plain" v-if="scope.row.status==0">正常</el-tag>
            <el-tag size="mini" effect="plain" type="warning" v-if="scope.row.status==3">审核中</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="createTime"
            label="创建时间"
            width="200">
        </el-table-column>
        <el-table-column
            label="操作"
            width="150">
          <template slot-scope="scope">
           <span v-if="scope.row.status===0">
              <el-button type="text" class="el-icon-edit" @click="edit(scope.row)">编辑</el-button>
        <el-popconfirm
            @confirm="recycle(scope.row.id)"
            style="margin-left:10px;"
            confirmButtonText='好的'
            cancelButtonText='不用了'
            icon="el-icon-info"
            iconColor="red"
            title="这是一段内容确定移入回收站吗？"
        >
              <el-button type="text" slot="reference" size="mini" icon="el-icon-s-operation">回收站</el-button>
            </el-popconfirm>
           </span>
            <span v-if="scope.row.status===2">
                 <el-button type="text" class="el-icon-edit"  @click="recover(scope.row.id)">恢复</el-button>
               <el-popconfirm
                   @confirm="deleteById(scope.row.id)"
                   style="margin-left:10px;"
                   confirmButtonText='好的'
                   cancelButtonText='不用了'
                   icon="el-icon-info"
                   iconColor="red"
                   title="这是一段内容确定移入回收站吗？"
               >
              <el-button type="text" slot="reference" size="mini" icon="el-icon-s-operation">删除</el-button>
            </el-popconfirm>
            </span>
            <span v-if="scope.row.status===3">
                 <el-button type="text" class="el-icon-edit"  @click="recover(scope.row.id)">通过</el-button>
                   <el-popconfirm
                       @confirm="deleteById(scope.row.id)"
                       style="margin-left:10px;"
                       confirmButtonText='好的'
                       cancelButtonText='不用了'
                       icon="el-icon-info"
                       iconColor="red"
                       title="这是一段内容确定移入回收站吗？"
                   >
                            <el-button type="text" slot="reference" size="mini"
                                       icon="el-icon-s-operation">删除</el-button>
                          </el-popconfirm>
                          </span>
          </template>

        </el-table-column>
      </el-table>
      <!--分页-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 8, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </el-card>
    <!--添加-->
    <el-dialog
        title="添加物资"
        :visible.sync="addDialogVisible"
        width="45%"
        @close="onClose"
    >

      <el-row :gutter="15">
        <el-form ref="elForm" :model="addProductVO" :rules="rules" size="medium" label-width="100px">
          <el-col :span="24">
            <el-form-item label="物资名称" prop="name">
              <el-input v-model="addProductVO.name" placeholder="请输入物资名称"
                        clearable :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="物资图片" prop="imageUrl">
              <el-upload
                  ref="my-upload"
                  action="/api/oss/uploadFile"
                  :headers="headers"
                  list-type="picture-card"
                  :multiple="false"
                  :limit="1"
                  :file-list="fileList"
                  :on-success="ok"
                  accept="image/*"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove">
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog
                  :modal="false"
                  :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="物资规格" prop="model">
              <el-input v-model="addProductVO.model" placeholder="请输入物资规格" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分类" prop="categoryKeys">

              <el-cascader v-model="addProductVO.categoryKeys"
                           :options="options"
                           :props="addPidProps"
                           :style="{width: '100%'}"
                           placeholder="请输入分类"
                           clearable></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位" prop="unit">
              <el-input v-model="addProductVO.unit" placeholder="请输入单位" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序" prop="sort">
              <el-input-number v-model="addProductVO.sort" placeholder="排序" :step='1'></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-form-item label="备注信息" prop="remark">
              <el-input v-model="addProductVO.remark" type="textarea" placeholder="请输入备注信息" :maxlength="50"
                        :autosize="{minRows: 2, maxRows: 2}" :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>


      <span slot="footer" class="dialog-footer">
    <el-button @click="onClose">取 消</el-button>
    <el-button type="primary" @click="submit">确 定</el-button>
  </span>
    </el-dialog>


  </div>
</template>

<script>
import axios from "axios";
import store from "@/store/index"
import {getList, add, edit, recycle, deleteById, recover} from "@/network/business/product";
import {getProductCategoryTree} from "@/network/business/productCategory";
import {deleteFile} from "@/network/business/api";

export default {
  name: "Product",
  data() {
    return {
      addDialogVisible: false,//添加窗口
      categorys: [],
      total: 0,
      pageSize: 8,
      currentPage: 1,
      stateList: [],//商品状态
      options: [],//绑定的参数
      pidProps: {
        "multiple": false,
        "label": "name",
        "value": "id",
        "children": "children",
        "checkStrictly": true
      },
      addPidProps: {
        "multiple": false,
        "label": "name",
        "value": "id",
        "children": "children",
      },
      tableData: [],//表格数据
      productVO: {
        name: '',
        status: undefined
      },
      addProductVO: {
        id: undefined,
        name: undefined,
        imageUrl: undefined,
        model: undefined,
        categoryKeys: undefined,
        unit: undefined,
        sort: undefined,
        remark: undefined,
      },
      rules: {
        imageUrl: {
          required: true,
          message: '请上传物资图片',
          trigger: 'blur'
        },
        name: {
          required: true,
          message: '请输入物资名称',
          trigger: 'blur'
        },
        model: [{
          required: true,
          message: '请输入物资规格',
          trigger: 'blur'
        }],
        categoryKeys: [{
          required: true,
          message: '请输入分类',
          trigger: 'blur'
        }],
        unit: [{
          required: true,
          message: '请输入单位',
          trigger: 'blur'
        }],
        sort: [{
          required: true,
          message: '排序',
          trigger: 'blur'
        }],
        remark: [{
          required: true,
          message: '请输入备注信息',
          trigger: 'blur'
        }],
      },
      dialogImageUrl: '',
      dialogVisible: false,
      fileList: []

    }
  }, created() {
    this.getList()
    this.getProductCategoryTree()
  },
  computed: {
    headers() {
      if (store && store.state && store.state.token) {
        return {
          token: store.state.token
        }
      }
      return ""
    }
  },
  methods: {
    getList() {
      getList(this.currentPage, this.pageSize, this.categorys.toString(), this.productVO).then((res) => {
        this.tableData = res.data.list
        this.total = res.data.total
      })
    },
    /*每页条数*/
    handleSizeChange(val) {
      this.pageSize = val
    },
    /*第几页*/
    handleCurrentChange(val) {
      this.currentPage = val
      this.getList()
    },
    getProductCategoryTree() {
      getProductCategoryTree().then((res) => {
        this.options = res.data.list.rows
      })
    },
    /*重置*/
    reset() {
      this.categorys = []

      this.productVO.status = null
      this.productVO.name = ''
      console.log(this.productVO)
    },
    /*添加*/
    add() {
      this.addDialogVisible = true
    },
    /*刷新*/
    refresh() {
      this.reset()
      this.getList()
    },
    /*关闭窗口*/
    onClose() {
      this.addProductVO = {}
      this.fileList = []
      this.dialogImageUrl = ''
      this.addDialogVisible = false
      this.$refs['my-upload'].clearFiles();

    },
    /*提交*/
    submit() {
      console.log("提交")
      console.log(this.addProductVO)
      this.$refs['elForm'].validate((valid) => {
        if (valid) {
          if (this.addProductVO.id === undefined) {
            /*添加*/
            this.addProducts()
          } else {
            /*编辑*/
            this.editProducts()
          }
          /*关闭*/
          this.onClose()
        } else {

          return false;
        }
      });
    },
    /*添加资料*/
    addProducts() {
      add(this.addProductVO).then((res) => {
        if (res.success) {
          this.$message({
            message: '恭喜你，添加商品资料成功',
            type: 'success'
          });
        } else {
          this.$message.error(res.message);
        }
      })

    },
    /*编辑*/
    editProducts() {
      console.log("编辑资料")
      console.log(this.addProductVO)
      edit(this.addProductVO).then((res) => {
        console.log(res)
      })
    }
    ,
    /*删除图片*/
    handleRemove(file) {
      if (this.fileList[0].url !== undefined) {
        return this.deleteFile(this.fileList[0].url);
      }

      this.deleteFile(file.response.data.url);


    },
    deleteFile(url) {
      deleteFile(url).then((res) => {
        this.dialogImageUrl = ''
        this.dialogVisible = false
        this.addProductVO.imageUrl = undefined
      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    /*上传成功设置URL*/
    ok(response) {
      this.addProductVO.imageUrl = response.data.url
    },
    /*编辑资料*/
    edit(data) {
      console.log("编辑")
      console.log(data)
      this.addProductVO = data
      this.fileList.push({url: data.imageUrl})
      this.addDialogVisible = true
    },
    /*回收站*/
    recycle(id) {
      recycle(id).then((res) => {
        this.resultMessage(res)


      })
    },
    /*恢复和通过*/
    recover(id) {
      recover(id).then((res) => {
        this.resultMessage(res)
      })
    },
    /*删除*/
    deleteById(id) {
      deleteById(id).then((res) => {
        this.resultMessage(res)
      })
    },
    /*返回信息*/
    resultMessage(res){
      if (res.success){
        this.$message({
          message: res.message,
          type: 'success'
        });
        this.getList()


      }else {
        this.$message({
          message: res.message,
          type: 'warning'
        });
      }
    }


  }


}
</script>

<style scoped>

</style>